<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>baguetteBox.js | Demo</title>
    <link rel="stylesheet" href="css/baguetteBox.css">
    <style>
body {
    background-color: #666;
    color: #ddd;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
}

a, a:visited {
    color: #9EB4CA;;
    text-decoration: none;
}

h1, h2, h3, footer, .gallery {
    text-align: center;
}

pre {
    width: 340px;
    margin: 0 auto;
    border: dashed 1px #aaa;
    margin-bottom: 10px;
}

@media (max-width: 480px) {
    pre {
        max-width: 98%;
    }
}

header, footer {
    display: block;
    padding: .2em 0;
    background-color: #555;
    box-shadow: 0 0 8px #222;
}

footer {
    margin-top: 1.5em;
}

.content {
    max-width: 1160px;
    margin: 0 auto;
}

.gallery:after {
    content: '';
    display: block;
    height: 2px;
    margin: .5em 0 1.4em;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(77,77,77,1) 50%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(77,77,77,1) 50%, rgba(0, 0, 0, 0) 100%);
}

.gallery img {
    height: 100%;
}

.gallery a {
    width: 240px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
    margin: 4px 6px;
    box-shadow: 0 0 4px -1px #000;
}

.ribbon > img {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
}

@media (max-width: 768px) {
    .sm-hidden {
        display: none;
    }
}

/* Highlight.js Tomorrow Night style */
.hljs-comment,.hljs-quote{color:#969896}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c66}.hljs-tag {color: #f8f8f2}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#de935f}.hljs-attr{color:#f0c674}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#b5bd68}.hljs-section,.hljs-title{color:#81a2be}.hljs-keyword,.hljs-selector-tag{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.8em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
    </style>
</head>
<body>
<a href="https://github.com/feimosi/baguetteBox.js" class="ribbon sm-hidden">
    <img src="img/forkme-on-github-right.png" alt="Fork me on GitHub">
</a>
<header>
    <h1>baguetteBox.js</h1>
    <h3>Simple and easy to use lightbox script written in pure JavaScript</h3>
</header>
<div class="content">
    <h2>Sample gallery</h2>

    <pre><code class="js">baguetteBox.run('.baguetteBoxOne');</code></pre>

    <div class="baguetteBoxOne gallery">
        <a href="img/1-1.jpg" data-caption="Golden Gate Bridge">
            <img src="img/thumbs/1-1.jpg" alt="Golden Gate Bridge">
        </a>
        <a href="img/1-2.jpg" title="Midnight City">
            <img src="img/thumbs/1-2.jpg" alt="Midnight City">
        </a>
        <a href="img/1-3.jpg">
            <img src="img/thumbs/1-3.jpg" alt="">
        </a>
        <a href="img/1-4.jpg">
            <img src="img/thumbs/1-4.jpg" alt="">
        </a>
        <a href="img/1-5.jpg">
            <img src="img/thumbs/1-5.jpg" alt="">
        </a>
        <a href="img/1-6.jpg">
            <img src="img/thumbs/1-6.jpg" alt="">
        </a>
        <a href="img/1-7.jpg">
            <img src="img/thumbs/1-7.jpg" alt="">
        </a>
        <a href="img/1-8.jpg">
            <img src="img/thumbs/1-8.jpg" alt="">
        </a>
    </div>

    <h2>Responsive images</h2>

<pre><code class="js">baguetteBox.run('.baguetteBoxTwo');</code></pre>
<pre><code class="html">&lt;a href=&quot;img/2-1.jpg&quot;
    data-at-450=&quot;img/thumbs/2-1.jpg&quot;
    data-at-800=&quot;img/small/2-1.jpg&quot;
    data-at-1366=&quot;img/medium/2-1.jpg&quot;
    data-at-1920=&quot;img/big/2-1.jpg&quot;&gt;
        &lt;img src=&quot;img/thumbs/2-1.jpg&quot;&gt;
&lt;/a&gt;</code></pre>

    <div class="baguetteBoxTwo gallery">
        <a href="img/2-1.jpg" data-at-450="img/thumbs/2-1.jpg" data-at-800="img/small/2-1.jpg" data-at-1366="img/medium/2-1.jpg" data-at-1920="img/big/2-1.jpg">
            <img src="img/thumbs/2-1.jpg" alt="">
        </a>
        <a href="img/2-2.jpg" data-at-450="img/thumbs/2-2.jpg" data-at-800="img/small/2-2.jpg" data-at-1366="img/medium/2-2.jpg" data-at-1920="img/big/2-2.jpg">
            <img src="img/thumbs/2-2.jpg" alt="">
        </a>
        <a href="img/2-3.jpg" data-at-450="img/thumbs/2-3.jpg" data-at-800="img/small/2-3.jpg" data-at-1366="img/medium/2-3.jpg" data-at-1920="img/big/2-3.jpg">
            <img src="img/thumbs/2-3.jpg" alt="">
        </a>
        <a href="img/2-4.jpg" data-at-450="img/thumbs/2-4.jpg" data-at-800="img/small/2-4.jpg" data-at-1366="img/medium/2-4.jpg" data-at-1920="img/big/2-4.jpg">
            <img src="img/thumbs/2-4.jpg" alt="">
        </a>
    </div>

    <h2>FadeIn animation</h2>

<pre><code class="js">baguetteBox.run('.baguetteBoxThree', {
    animation: 'fadeIn',
    noScrollbars: true
});</code></pre>

    <div class="baguetteBoxThree gallery">
        <a href="img/3-1.jpg">
            <img src="img/thumbs/3-1.jpg" alt="">
        </a>
        <a href="img/3-2.jpg">
            <img src="img/thumbs/3-2.jpg" alt="">
        </a>
        <a href="img/3-3.jpg">
            <img src="img/thumbs/3-3.jpg" alt="">
        </a>
        <a href="img/3-4.jpg">
            <img src="img/thumbs/3-4.jpg" alt="">
        </a>
    </div>

    <h2>Small images, buttons disabled (use arrows or swipe gesture)</h2>

<pre><code class="js">baguetteBox.run('.baguetteBoxFour', {
    buttons: false
});</code></pre>

    <div class="baguetteBoxFour gallery">
        <a href="img/small/4-1.jpg" data-caption="Balloon trip">
            <img src="img/thumbs/4-1.jpg" alt="Balloon trip">
        </a>
        <a href="img/small/4-2.jpg" data-caption="Road to nowhere">
            <img src="img/thumbs/4-2.jpg" alt="Road to nowhere">
        </a>
        <a href="img/small/4-3.jpg" data-caption="Misty landscape">
            <img src="img/thumbs/4-3.jpg" alt="Misty landscape">
        </a>
        <a href="img/small/4-4.jpg" data-caption="Forest">
            <img src="img/thumbs/4-4.jpg" alt="Forest">
        </a>
    </div>

    <h2>Single image (buttons hidden by default, custom caption function)</h2>

<pre style="width: 520px"><code class="js">baguetteBox.run('.baguetteBoxFive', {
    captions: function(element) {
        return element.getElementsByTagName('img')[0].alt;
    }
});</code></pre>

    <div class="baguetteBoxFive gallery">
        <a href="img/5-1.jpg">
            <img src="img/thumbs/5-1.jpg" alt="A caption in the alt attribute">
        </a>
    </div>

    <h3>Usage instructions and source code can be found on
    <a href="https://github.com/feimosi/baguetteBox.js">GitHub</a></h3>
</div>
<footer>
    <p>Images have been downloaded from: <a href="https://unsplash.com/">unsplash.com</a> and <a href="http://www.gratisography.com/">gratisography.com</a></p>
    <p>
        Copyright &copy;
        <span id="year"></span>
        <a href="https://github.com/feimosi/">feimosi</a>
    </p>
</footer>
<script src="js/baguetteBox.js" async></script>
<script src="js/highlight.min.js" async></script>
<!--[if lt IE 9]>
<script>
var oldIE = true;
</script>
<![endif]-->
<script>
window.onload = function() {
    baguetteBox.run('.baguetteBoxOne');
    baguetteBox.run('.baguetteBoxTwo');
    baguetteBox.run('.baguetteBoxThree', {
        animation: 'fadeIn',
        noScrollbars: true
    });
    baguetteBox.run('.baguetteBoxFour', {
        buttons: false
    });
    baguetteBox.run('.baguetteBoxFive', {
        captions: function(element) {
            return element.getElementsByTagName('img')[0].alt;
        }
    });

    if (typeof oldIE === 'undefined' && Object.keys) {
        hljs.initHighlighting();
    }

    var year = document.getElementById('year');
    year.innerText = new Date().getFullYear();
};
</script>
</body>
</html>
